import Vue from 'vue'
//1.1 导入路由相关的包
import VueRouter from 'vue-router'
//1.2 安装路由
Vue.use(VueRouter)



// 配置vuex
import Vuex from 'vuex'
Vue.use(Vuex)
var carData = JSON.parse(localStorage.getItem('car') || '[]') // 在页面刷新之前，先拿到localstorage的数据，保存到 state.car 中
var store = new Vuex.Store({
    state: {
        // 存放公共数据的地方  this.$store.state.****
        // 分析： 点击加入购物车的时候，需要把一个商品相关的对象，保存到 store 中，{ id: 要购买的商品ID, count:要购买的数量, price:要购买的商品单价, selected: 商品是否选中了}
        car: carData // 购物车的数组
    },
    mutations: {
        // 存放操作 state 中数据的方法     this.$store.commt("要提交方法的名称",可选的唯一的参数对象)
        addToCar(state, goodsinfo) {
            // 分析：1.加入购物车中，之前有过相同的商品，只需要把商品的数量更新一下即可
            // 2.如果购物车中没有这样的商品，直接把 goodsinfo push 到 car 中即可
            // 假设没有找到相同的商品
            var flag = false
            state.car.store.some(string)(item => {
                if (item.id == goodsinfo.id) {
                    item.count += parseInt(goodsinfo.count)
                    flag = true
                    return true
                }
            })

            if (!flag) {
                state.car.push(goodsinfo)
            }
            // 把最新的 car 中的数据，保存到 localStorage 中
            localStorage.setItem('car', JSON.stringify(state.car))
        },
        updateGoodsCount(state, goodsinfo) {
            state.car.some(item => {
                    if (item.id == goodsinfo.id) {
                        item.count = goodsinfo.count
                        return true
                    }
                })
                // 每当购物车中的数据变化了，则立即把最新的数据同步到 localStorage 中
            localStorage.setItem('car', JSON.stringify(state.car))
        },
        removeFormCar(state, id) {
            // 根据商品的ID，从 car 中删除对应商品的数据
            state.car.some((item, i) => {
                    if (item.id == id) {
                        state.car.splice(i, 1)
                        return true
                    }
                })
                // 每当删除了数据，就把最新的 car 保存到 localstorage 中
            localStorage.setItem('car', JSON.stringify(state.car))
        },
        updateSelected(state, info) {
            // 更新商品的选择状态
            state.car.some(item => {
                    if (item.id == info.id) {
                        item.selected = info.selected
                    }
                })
                // 更新完毕状态，把最新的 car 保存到 localstorage中
            localStorage.setItem('car', JSON.stringify(state.car))
        }
    },
    getters: {
        // 主要当作 计算属性使用，也可以当作 过滤器来使用   this.$store.getters.****
        getAllCount(state) {
            var c = 0
            state.car.forEach(item => {
                c += item.count
            })
            return c
        },
        getCountObj(state) {
            var o = {}
            state.car.forEach(item => {
                o[item.id] = item.count
            })
            return o
        },
        getGoodsSelected(state) {
            // 从 store 中创建一个 键为id 值为selected状态的对象
            var o = {}
            state.car.forEach(item => {
                o[item.id] = item.selected
            })
            return o
        },
        getSelectedCountAndAmount(state) {
            var o = {
                totalcount: 0, // 勾选商品的数量
                amount: 0 // 勾选商品的总价
            }
            state.car.forEach(item => {
                if (item.selected) {
                    o.totalcount += item.count
                    o.amount += item.price * item.count
                }
            })
            return o
        }
    }
})

//导入自己的过滤器模块
import './filters.js'





//配置 vue-resource
import VueResource from 'vue-resource'
//安装 VueResource
Vue.use(VueResource)
    //这是全局配置请求根路径到 ，必须放到 vueResource注册之后
Vue.http.options.root = 'http://gank.io';
//全局配置 post提交时候的表单数据类型  为  application/x-www-form-urlencoded
Vue.http.options.emulateJSON = true;



//按需导入 自己需要的 Mint-ui 组件
// import { Header, Swipe, SwipeItem, Button, Lazyload } from 'mint-ui'
// //使用 Vue.component 注册 Header 组件
// Vue.component(Header.name, Header)
//     //注册轮播图相关的组件
// Vue.component(Swipe.name, Swipe);
// Vue.component(SwipeItem.name, SwipeItem);
// Vue.component(Button.name, Button);
// //注册廉价在组件
// Vue.component(Lazyload);


//全局注册所有的 MintUI 插件
import MintUI from 'mint-ui'
Vue.use(MintUI)
import 'mint-ui/lib/style.css'

//注册缩略图插件
import VuePreview from 'vue-preview'
// defalut install
Vue.use(VuePreview)




//导入MUI的样式表
import './lib/mui/css/mui.min.css'
//导入扩展的字体图标样式
import './lib/mui/css/icons-extra.css'





//导入App根组件 
import app from './App.vue'
//导入路由
import router from './router.js'


var vm = new Vue({
    el: '#app',
    render: c => c(app),
    router, //挂载路由对象
    store // 将 store 注册到 vm 实例上
})